<!--  -->
<template>
  <div class="hhboxh">
    <div class="leftboxnav">
      <img src="https://i.postimg.cc/QxWVxwyB/Apeks-Logo-Infobox.png">
    </div>
    <ul class="navbox">
      <RouterLink to="/homeofone/homeshow"><li>首页</li></RouterLink>
      <RouterLink to="/homeofone/buy"><li>下单</li></RouterLink>
      <RouterLink to=""><li>订单</li></RouterLink>
    </ul>
    <div class="rightboxnav">
      <img :src="piniaData.pic">
      <span>{{piniaData.zcname}}</span>
    </div>
  </div>
</template>

<script setup lang='js'>
import { ref, reactive } from 'vue'
import { RouterLink } from "vue-router"
import { peoplePiniadata } from '@/stores/peoplePinia.js'

//数据持久化处理
const piniaData = peoplePiniadata()
</script>

<style  scoped>
.hhboxh{
  width: 100%;
  height: 100%;
  display: flex;
}
.leftboxnav,.rightboxnav{
  width: 200px;
  height: 100%;
  font-size:20px;
}
.rightboxnav img{
  float: left;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-top: 5px;
  margin-left: 10px;
}
.rightboxnav span{
  float: left;
  margin-top: 20px;
  margin-left: 10px;
}
.leftboxnav img{

  width: 55px;
  height: 30px;
  margin-top: 15px;
  margin-left: 80px;
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.2));
}
.navbox {
  flex: 1;
  display: flex;
  list-style: none;
  justify-content: space-around;
}

.navbox li {
  width: 88px;
  height: 60%;
  margin-top: 10px;
  line-height: 37px;
  text-align: center;
  font-family: 'Courier New', Courier, monospace;
  cursor: pointer;
  transition: all 0.3s;
  text-decoration: none;
  color: black !important;
}
.navbox li:hover{
  font-weight: 700;
  color: aliceblue;
  background-color: black;
}
</style>

https://cn.bing.com/images/search?view=detailV2&ccid=xjBQox3e&id=DFAE1BB0C3DCE1A39F3874553D6743E531179F7A&thid=OIP.xjBQox3eqwyVa0opXUKt2gHaEk&mediaurl=https%3a%2f%2fts1.cn.mm.bing.net%2fth%2fid%2fR-C.c63050a31ddeab0c956b4a295d42adda%3frik%3dep8XMeVDZz1VdA%26riu%3dhttp%253a%252f%252fimg95.699pic.com%252fphoto%252f50034%252f3921.jpg_wh860.jpg%26ehk%3dhRZOJwFYuU8uMrLy%252f8M8oYarenlrNuUidcv7EIJULXA%253d%26risl%3d%26pid%3dImgRaw%26rhttps://ts1.cn.mm.bing.net/th/id/R-C.c63050a31ddeab0c956b4a295d42adda?rik=ep8XMeVDZz1VdA&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50034%2f3921.jpg_wh860.jpg&ehk=hRZOJwFYuU8uMrLy%2f8M8oYarenlrNuUidcv7EIJULXAhttps://tse2-mm.cn.bing.net/th/id/OIP-C.xjBQox3eqwyVa0opXUKt2gHaEk?https://tse1-mm.cn.bing.net/th/id/OIP-C.xjBQox3eqwyVa0opXUKt2gHaEk?https://th.bing.com/th/id/R.aba7ed0aa6eed9dafcf8aded16c1a73e?rik=cFejACLzzXWIOQ&riu=http%3a%2f%2fpic.zsucai.com%2ffiles%2f2013%2f0923%2fhaian4.jpg&ehk=ubywR87DGC%2bar%2fU7T0a1iOmLzQEeS3AUygdQfAXp4Mk%3d&risl=&pid=ImgRaw&r=0"
